import React, { Component } from 'react'
import connect from './connect'
import { withRouter } from 'react-router-dom'

import {
  HotListWrap
} from './style'

import Loading from '../Loading'

@connect
@withRouter
class index extends Component {
  componentDidMount() {
    this.props.getGookCookData()
  }


  goDetail = id => {
    this.props.history.push('/detail/' + id)
  }

  render() {
    return (
      <HotListWrap>
        <h1>精品好菜</h1>
        <div>
          {
            !this.props.goodcook.get(0) ? <Loading /> : (
              this.props.goodcook.map(item => (
                <dl key={item.get('id')} onClick={this.goDetail.bind(this, item.get('id'))}>
                  <dt>
                    <img src={item.get('img')} />
                  </dt>
                  <dd>
                    <h3>{item.get('name')}</h3>
                    <p>{item.get('all_click')}浏览  2000收藏</p>
                  </dd>
                </dl>
              ))
            )
          }
        </div>
      </HotListWrap>
    )
  }
}

export default index